<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>创意讲师数据</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'AgencyAdLecturerLecturerList' }">讲师发放管理</el-breadcrumb-item>
          <el-breadcrumb-item>推广链接</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block">
      <div class="info-box">
        <div class="link_count">
          推广链接数：<span class="value">{{ state.pages.total }}</span>
        </div>
      </div>
    </div>
    <div class="base-block">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #actions="{ row }">
          <el-Link type="primary" @click="onClickCopyLink(row.extend_url)">复制</el-Link>
          <el-Link type="primary" @click="onClickEditLink(row)">编辑</el-Link>
          <el-Link v-if="row.status === 1" type="error" @click="onClickStop(row)">停用</el-Link>
        </template>
      </KTable>
    </div>
    <EditModal ref="editModal" @success="methods.getList" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useTableList } from './hooks/use-table';
import { ElMessage } from 'element-plus';
import { toolCopyText } from '@/utils';
import { baseConfirm } from '@crud/index';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import EditModal from './components/edit-modal.vue';
import { stopLecPromoteLink } from '@/api/crm-agency/ad/lecturer';
defineOptions({ name: 'AgencyAdLecturerPromoteLinkList' });
const route = useRoute();
const agent_id = route.params.agent_id;
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: Record<string, any>) => {
    return {
      ...params,
      agent_id
    };
  }
});
// , ...methods
// 复制
const onClickCopyLink = (url: string) => {
  toolCopyText(url);
  ElMessage.success('复制成功');
};
// 编辑
const editModal = ref();
const onClickEditLink = (row: any) => {
  editModal.value.show(1, { ...row, agent_id: Number(agent_id) });
};
// 停用
const onClickStop = async (row: any) => {
  await baseConfirm({ title: '停用链接', message: '停用链接后，将无法使用，请确认是否停用？' });
  const { extend_id } = row;
  const reqParams = {
    data: { extend_id }
  };
  await stopLecPromoteLink(reqParams);
  ElMessage.success('停用成功');
  methods.getList();
};
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;

  &.disable {
    color: #86909c;
  }
}

.info-box {
  display: flex;

  .value {
    font-size: 16px;
    font-weight: bold;
  }

  .link_count {
    min-width: 120px;
    margin-right: 10px;
  }
}
</style>
